<template>
    <div>
        <div class="container">
            <div class="info infoWrapper">
                <div class="title">
                    基础信息
                    <el-button
                        class="btn"
                        type="primary"
                        v-if="storeInfo.status === 3"
                        @click="onAudit('merchantSatus')">
                        审核
                    </el-button>
                </div>
                <div class="logoWrapper">
                    <el-image class="logo" :src="storeInfo.logo" fit="fill" />
                    <span>{{ storeInfo.tenantName }}</span>
                    <span v-if="storeInfo.status === 1" class="status_bg authed">{{ shopOpenStatus[1] }}</span>
                    <span v-if="storeInfo.status === 2" class="status_bg">{{ shopOpenStatus[2] }}</span>
                    <span v-if="storeInfo.status === 3" class="status_bg audit">{{ shopOpenStatus[3] }}</span>
                    <template v-if="storeInfo.status === 4">
                        <span class="status_bg fail"> {{ shopOpenStatus[4] }} </span>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div style="max-width: 400px">{{ storeInfo.statusRejectReason }}</div>
                            </template>
                            <img class="question" src="@/assets/imgs/warn.png" alt="" />
                        </el-tooltip>
                    </template>
                </div>
                <el-row>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>联系人：</b><span>{{ storeInfo.contactName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>联系电话：</b><span>{{ storeInfo.contactMobile }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>超管账户：</b><span>{{ storeInfo.adminUserInfoStr }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>注册时间：</b><span>{{ storeInfo.createdAt }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="gray"></div>
            <div class="info">
                <div class="title">
                    企业信息
                    <el-button
                        class="btn"
                        type="primary"
                        v-if="storeInfo.identStatus === 3"
                        @click="onAudit('identStatus')">
                        审核
                    </el-button>
                </div>
                <div class="nameWrapper">
                    {{ storeInfo.merchantName }}
                    <span v-if="storeInfo.identStatus === 1" class="status_bg">{{ shopAuthStatus[1] }}</span>
                    <span v-if="storeInfo.identStatus === 2" class="status_bg authed">{{ shopAuthStatus[2] }}</span>
                    <span v-if="storeInfo.identStatus === 3" class="status_bg audit">{{ shopAuthStatus[3] }}</span>
                    <template v-if="storeInfo.identStatus === 4">
                        <span class="status_bg fail"> {{ shopAuthStatus[4] }} </span>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div style="max-width: 400px">{{ storeInfo.rejectReason }}</div>
                            </template>
                            <img class="question" src="@/assets/imgs/warn.png" alt="" />
                        </el-tooltip>
                    </template>
                </div>
                <el-row>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>联系人：</b><span>{{ storeInfo.contactName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>联系电话：</b><span>{{ storeInfo.contactMobile }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>企业授权附件：</b
                            ><span v-if="storeInfo.identInfo.authorizePaper">
                                <i
                                    ><el-image
                                        class="img"
                                        :src="storeInfo.identInfo.authorizePaper"
                                        :preview-src-list="[storeInfo.identInfo.authorizePaper]"
                                        :initial-index="0"
                                        fit="fill"
                                /></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>超管账户：</b><span>{{ storeInfo.adminUserInfoStr }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>初次认证：</b
                            ><span v-if="storeInfo.identStatus !== 1">{{
                                format(storeInfo.identInfo.firstIdentAt, 'YYYY/MM/DD')
                            }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>类目：</b
                            ><span class="cate" v-if="storeInfo?.cateList?.length !== 0">
                                <i v-for="(item, index) in storeInfo.cateList" :key="index"
                                    >{{ item.categoriesFirstName }}/{{ item.categoriesSecondName }}</i
                                >
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>企业代码：</b><span>{{ storeInfo.identInfo.regNo }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>法人姓名：</b><span>{{ storeInfo.identInfo.corporateName }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>类目资质附件：</b
                            ><span v-if="storeInfo.identInfo.businessImg">
                                <i
                                    ><el-image
                                        class="img"
                                        :src="storeInfo.identInfo.businessImg"
                                        fit="fill"
                                        :preview-src-list="[storeInfo.identInfo.businessImg]"
                                        :initial-index="0"
                                /></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>营业执照附件：</b
                            ><span v-if="storeInfo.identInfo.licenseImg">
                                <i
                                    ><el-image
                                        class="img"
                                        :src="storeInfo.identInfo.licenseImg"
                                        :preview-src-list="[storeInfo.identInfo.licenseImg]"
                                        :initial-index="0"
                                        fit="fill"
                                /></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>法人身份证附件：</b
                            ><span v-if="storeInfo.identInfo.corporateFrontImg">
                                <i
                                    ><el-image
                                        class="img"
                                        :src="storeInfo.identInfo.corporateFrontImg"
                                        :preview-src-list="[storeInfo.identInfo.corporateFrontImg]"
                                        :initial-index="0"
                                        fit="fill" /></i
                                ><i
                                    ><el-image
                                        class="img"
                                        :src="storeInfo.identInfo.corporateBackImg"
                                        :preview-src-list="[storeInfo.identInfo.corporateBackImg]"
                                        :initial-index="0"
                                        fit="fill" /></i
                            ></span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="infoItem">
                            <b>其他补充附件：</b
                            ><span v-if="storeInfo.identInfo.otherPaper.length !== 0">
                                <i v-for="(item, index) in storeInfo.identInfo.otherPaper" :key="index">
                                    <el-image
                                        class="img"
                                        :preview-src-list="storeInfo.identInfo.otherPaper"
                                        :initial-index="index"
                                        :src="item"
                                        fit="fill" />
                                </i>
                            </span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="gray"></div>
            <div class="info">
                <div class="title">店铺信息</div>
                <!-- table -->
                <div class="tableWrapper">
                    <el-table :data="tableList" :border="true" stripe class="cm-table">
                        <el-table-column label="店铺名称" prop="shopName"></el-table-column>
                        <el-table-column label="店铺类型" prop="typeDesc"></el-table-column>
                        <el-table-column label="联系人" prop="contactPerson"></el-table-column>
                        <el-table-column label="联系电话" prop="tel"></el-table-column>
                        <el-table-column label="状态" prop="status">
                            <template v-slot="{ row }">
                                <span class="status_authed" v-if="row.status === 1">正常</span>
                                <span class="status_authed status_fail" v-if="row.status === 2">停用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createdAt"></el-table-column>
                        <template v-slot:empty>
                            <div class="empty-table">
                                <img style="width: 50%" src="@/assets/imgs/default.png" />
                                <div class="empty-content">暂无店铺信息</div>
                            </div>
                        </template>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 审核弹窗 -->
        <AuditDia v-model="state.auditShow" :data="auditProps" @confirm="onAuditConfirm" />
    </div>
</template>
<script setup>
import AuditDia from './auditDia.vue';
import storage from '@/commons/storage';
import { ref, reactive, onMounted, inject, onUnmounted, watch, computed } from 'vue';
import request from '@/request';
import { useRoute } from 'vue-router';
import { format } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import { isEmpty } from '@/commons/utils';
import { setLayout, resetLayout } from '@/hooks/layout';
import constants from '@/commons/constants';
const shopOpenStatus = constants.SHOP_OPEN_STATUS;
const shopAuthStatus = constants.SHOP_AUTH_STATUS;

const state = reactive({
    auditShow: false,
    auditType: 'merchantSatus'
});
const auditProps = computed(() => {
    return { auditType: state.auditType, tenantId: query.id, identId: storeInfo.identInfo.id };
});

const onAudit = type => {
    state.auditType = type;
    state.auditShow = true;
};

const onAuditConfirm = () => {
    init(true);
};
/** 通信bus */
const bus = inject('bus');
const query = useRoute().query;
let authValue = ref('');
let failreason = ref('');
let dialogVisible = ref(false);
let tableList = reactive([]);
const getInitialData = () => ({
    // 商城logo
    logo: '',
    // 商城名称
    tenantName: '',
    // 联系人
    contactName: '',
    // 联系电话
    contactMobile: '',
    // 超级账户
    adminUserInfoStr: '',
    // 注册时间/初次认证时间？
    createdAt: '',
    // 企业状态 1未认证2已认证3待审核4已驳回
    identStatus: 1,
    // 认证信息
    identInfo: {
        // 企业授权图片
        authorizePaper: '',
        // 企业代码
        regNo: '',
        // 法人姓名
        corporateName: '',
        // 资质附件
        businessImg: '',
        // 营业执照
        licenseImg: '',
        // 法人身份证正面
        corporateFrontImg: '',
        // 法人身份证反面
        corporateBackImg: '',
        otherPaper: [],
        // 初次认证时间
        firstIdentAt: '',
        // 类目
        cateList: []
    }
});
const storeInfo = reactive(getInitialData());
// 监听清空驳回原因
watch([() => authValue.value, () => dialogVisible.value], res => {
    if (res[0] === '1' || res[1] === false) {
        failreason.value = '';
    }
});

// 获取详情
onMounted(() => {
    storage.set('SEARCH_RESET', false);
    init();
    setLayout();
});
onUnmounted(() => {
    resetLayout();
});
// 初始化
const init = async (type = false) => {
    const { data } = await request('tenantInfo', {
        tenantId: query.id
    });
    type && Object.assign(storeInfo, getInitialData());
    Object.assign(storeInfo, data);
    if (Array.isArray(storeInfo.identInfo)) {
        storeInfo.identInfo = {
            // 企业授权图片
            authorizePaper: '',
            // 企业代码
            regNo: '',
            // 法人姓名
            corporateName: '',
            // 资质附件
            businessImg: '',
            // 营业执照
            licenseImg: '',
            // 法人身份证正面
            corporateFrontImg: '',
            // 法人身份证反面
            corporateBackImg: '',
            otherPaper: []
        };
    } else {
        storeInfo.identInfo.otherPaper && (storeInfo.identInfo.otherPaper = storeInfo.identInfo.otherPaper.split(';'));
    }
    // storeInfo.adminUserInfo为空时是[]
    storeInfo.adminUserInfoStr = storeInfo.adminUserInfo.username || '';
    tableList.length = 0;
    storeInfo.shopList.map(item => {
        item.typeDesc = item.type === 2 ? '直营' : '加盟';
        tableList.push(item);
    });
    // if (type) {
    //     dialogVisible.value = false;
    //     ElMessage({
    //         type: 'success',
    //         message: '审核成功!'
    //     });
    //     bus.emit('store:update');
    // }
};
</script>
<style lang="scss" scoped>
.container {
    .info {
        background: #ffffff;

        .title {
            padding: 16px 24px;
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            line-height: 24px;
            border-bottom: 1px solid #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .btn {
                width: 80px;
                height: 32px;
                background: #ff6b00;
                border-radius: 4px;
            }
        }
        .infoItem {
            padding-bottom: 16px;
            padding-left: 24px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
            display: flex;
            b {
                min-width: 70px;
                font-weight: normal;
            }
            span {
                color: #333333;
                display: flex;
                flex-wrap: wrap;
                word-break: break-all;
                .img {
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;
                }
                .img:nth-child(3n) {
                    margin-right: 0;
                }
            }
            .cate {
                display: flex;
                flex-direction: column;
                i {
                    font-style: normal;
                }
            }
        }
    }
    .default {
        position: relative;
        padding-left: 16px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        display: block;
        &::after {
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #cccccc;
            border-radius: 4px;
            width: 8px;
            height: 8px;
        }
    }
    .authed::after {
        background: #32d1ad;
    }
    .auth::after {
        background: #ffd500;
    }
    .fail::after {
        background: #ff4a1a;
    }
    :deep(.el-dialog) {
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
            0px 6px 16px -8px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        margin: 0;
    }
    :deep(.el-dialog__header) {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    :deep(.el-dialog__body) {
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        padding: 24px;
    }
    :deep(.el-dialog__footer) {
        padding: 14px 24px 14px 0;
    }
    :deep(.el-radio.el-radio--large .el-radio__inner) {
        width: 16px;
        height: 16px;
    }
    :deep(.el-radio__input.is-checked .el-radio__inner) {
        background: #fff;
    }
    :deep(.el-radio__inner::after) {
        width: 10px;
        height: 10px;
        background: #ff6b00;
    }
}
.imgpreview {
    :deep(.el-dialog) {
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
            0px 6px 16px -8px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        margin: 0;
        min-width: 400px;
        width: auto;
    }
}
.logoWrapper {
    display: flex;
    padding: 24px 24px 16px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #33302d;
    line-height: 14px;
    .logo {
        width: 48px;
        height: 48px;
        margin-right: 12px;
    }
}
.infoWrapper .infoItem {
    padding-bottom: 24px;
}
.gray {
    background: #f3f3f3;
    height: 16px;
}
.nameWrapper {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 14px;
    padding: 24px 24px 16px;
    span {
        width: 64px;
        height: 22px;
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 22px;
        text-align: center;
        margin-left: 8px;
    }
    .store-certification {
        background: #f3f3f3;
        color: #cccccc;
    }
    .store-auth {
        background: #fbf6df;
        color: #ffd500;
    }
    .store-fail {
        background: #feebe6;
        color: #ff4a1a;
    }
    .store-success {
        background: #ebfffa;
        color: #32d1ad;
    }
}
.tableWrapper {
    padding: 0 24px 24px 24px;
}
.empty-table {
    padding: 50px 0;
    min-height: 300px;
    text-align: center;
    vertical: center;
    img {
        width: 50%;
    }
    .empty-content {
        height: 20px;
        font-size: 13px;
        color: #969696;
        line-height: 20px;
    }
}
.question {
    width: 16px;
    height: 16px;
    margin-left: 3px;
}
.status_bg {
    width: 64px;
    height: 22px;
    margin-left: 8px;
    background: #f3f3f3;
    border-radius: 2px;
    color: #cccccc;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #cccccc;
    line-height: 22px;
    text-align: center;
}
.authed {
    background: #ebfffa;
    color: #32d1ad;
}
.audit {
    background: #fbf6df;
    color: #ffd500;
}
.fail {
    background: #feebe6;
    color: #ff4a1a;
}
.status_authed {
    display: flex;
    align-items: center;
    &::before {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 6px;
        content: '';
        border-radius: 4px;
        background: #32d1ad;
    }
}

.status_fail::before {
    background: #ff4a1a;
}
</style>
